import React, { useState, useEffect, useCallback, Fragment } from 'react';
import {
  Form,
  Table,
  Input,
  Button,
  Select,
  Space,
  Divider,
  Breadcrumb,
  message,
  Modal,
} from 'antd';
import styles from './styles.less';
import { getClassList, addClass } from '@/services/basic/class_and_grade';
import CreateForm from './component/CreateForm'
const ClassAndGrade = () => {
  const [dataSource, setDataSource] = useState([]);
  const [createModalVisible,setCreateModalVisible] = useState<boolean>(false)
  const [refresh, setRefresh] = useState<boolean>(false);

  const queryStudentList = useCallback(async (params?: IStudentParams) => {
    // const result = await getStudentList(params);
    const result = await addClass(params);
    // console.log(result);
    const { code, data } = result;
    if (code === 0) {
      setDataSource(data.rows);
    }
  }, []);

  useEffect(() => {
    let cancel = false;
    !cancel && queryStudentList();

    return () => {
      cancel = true;
    };
  }, [refresh]);

  const refreshList = useCallback(() => {
    setRefresh((refresh) => !refresh);
  }, []);



  const columns: any[] = [
    // {
    //   title: '选择',
    //   dataIndex: ' ',
    // },
    {
      title: '班级',
      dataIndex: 'className',
    },
    {
      title: '学制',
      dataIndex: 'classAcademic',
    },
    {
      title: '入学年份',
      dataIndex: 'classYear',
    },
    {
      title: '所属专业',
      dataIndex: 'specialName',
    },
    {
      title: '所属院（系）',
      dataIndex: 'facultyName',
    },
    {
      title: '班级状态',
      dataIndex: 'classStatus',
    },
    {
      title: '学生总数',
      dataIndex: 'studentNum',
    },
    {
      title: '操作',
      dataIndex: 'option',
      valueType: 'option',
      render: ( ) => (
        <>
          <a
            onClick={() => {
              // Schooldata(payload);
              // setStepFormValues(record);
            }}
          >
            编辑
          </a>
          <Divider type="vertical" />
          <a
          // onClick={}
          >
            删除
          </a>
        </>
      ),
    },
  ];


  const handleAddStudent=()=>{ 
    setCreateModalVisible(true)
  }
  const handleHidden= useCallback(()=>{
    setCreateModalVisible(false)
  },[])

  useEffect(() => {
    (async () => {
      const result = await getClassList();
      // console.log(result);
      const { code, rows } = result;
      if (code === 0) {
        setDataSource(rows);
      }
    })();
  }, []);
  return (
    <>
      <div>
        <Breadcrumb className={styles.top}>
          <Breadcrumb.Item>首页</Breadcrumb.Item>
          <Breadcrumb.Item>基础信息</Breadcrumb.Item>
          <Breadcrumb.Item>班级信息</Breadcrumb.Item>
        </Breadcrumb>
        <Form
          // form={form}
          layout="inline"
          size="middle"
          className={styles.inquire}
          name="basic"
          initialValues={{
            school: '',
            profession: '',
            grade: '',
            class: '',
            degree: '',
            studentStatus: '',
            accountStatus:'',
          }}
          // onFinish={handleSubmit}
        >
          <Form.Item label="院（系）" name="school">
            <Select>
              <Select.Option value="">全部</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="专业" name="profession">
            <Select>
              <Select.Option value="">全部</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item label="年级" name="grade">
            <Select>
              <Select.Option value="">全部</Select.Option>
            </Select>
          </Form.Item>
          <Form.Item name="studentName">
            <Input placeholder="请输入专业名称和专业代码" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              搜索
            </Button>
          </Form.Item>
        </Form>
        <div className={styles.tableTop}>
          <h2>信息列表</h2>
          <div>
            <Button
              className={styles.Button1}
              onClick={handleAddStudent}
            >
              新增班级
            </Button>
            <Button className={styles.Button2}>批量导入</Button>
          </div>
        </div>
        <Table
          rowKey="id"
          columns={columns}
          dataSource={dataSource} 
        />
        <CreateForm
          // type={type}
          // willEditStudent={willEditStudent}
          modalVisible={createModalVisible}
          refreshList={refreshList}
          onCancel={handleHidden}
        />
      </div>
    </>
  );
};
export default React.memo(ClassAndGrade);
